<template>
	<view class="container" v-if="isLandscape">
		<video src="https://bucket-yin.oss-cn-chengdu.aliyuncs.com/dt_bg.mp4" autoplay loop :controls="false"
			class="bg-video" object-fit="cover"></video>
		<view class="content">
			<!-- 头像和等级 -->
			<view class="header-img">
				<image class="my-head"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.CJaYelY4no2YWokPb63zgAAAAA?rs=1&pid=ImgDetMain">
				</image>
				<view class="lv">{{userlLevel}}</view>
			</view>
			
			<!-- 昵称 -->
			<view class="nickName">
				{{nickName}}
				<image class="vip_img" src="https://bucket-yin.oss-cn-chengdu.aliyuncs.com/vip.png"></image>
			</view>

			<!-- 匹配效果 -->
			<view class="match" v-show="match">
				{{waitingTime}} 末日行动 之 拯救五角大楼
			</view>

			<!-- 右上角的金币和设置 -->
			<RightTools class="money"></RightTools>

			<!-- 广告栏 -->
			<swiper class="advertisement" indicator-dots autoplay circular>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner1.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner2.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner3.jpg" mode="scaleToFill"></image>
				</swiper-item>
			</swiper >

			<!-- 开始游戏 -->
			<view class="start-game" @click="startGame" v-if="!match">
				开始游戏
			</view>
			<view class="start-game" @click="stopGame" v-else>
				取消准备
			</view>

			<!-- 左下角的功能区 -->
			<LeftTools class="tools"></LeftTools>

			<!-- 世界聊天框 内容 -->
			<view class="message-content">
				<WorldChatBoxVue></WorldChatBoxVue>
			</view>

			<!-- 组队邀请的同意 -->
			<view class="invite"></view>

		</view>
	</view>
	<view class="tip" v-else>
		<text>请将设备旋转到横屏模式以查看内容</text>
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	import {getUserInfo} from "@/api/index";
	import LeftTools from "@/component/LeftTools.vue";
	import WorldChatBoxVue from '../../component/WorldChatBox.vue';
	import RightTools from "@/component/RightTools.vue";
import { client } from 'stompjs';
	export default {
		data() {
			return {
				isLandscape: true,
				match: false,
				nickName:"",
				waitingTime: "00:00",
				userlLevel:"",
				userInfo:{}
			}
		},
		components:{
			WorldChatBoxVue,
			LeftTools
		},
		//当页面加载完成触发
		mounted() {
			this.getInfo();
		},

		afterDestroy(){
			audioManager.destroyAll();
		},
		methods: {
			getInfo(){
				getUserInfo().then((data)=>{
					console.log("结果",data);
					this.userInfo = data.data;
					this.nickName=data.data.nickName;
					this.userlLevel=data.data.level
				})
			},
			startGame() {
				this.match = true;
				audioManager.playAudio('qiangshen', true);
				// 分  秒  Minutes and seconds
								let minutes = 0;
								let seconds = 0;
								this.myInterval = setInterval(()=>{
									seconds++;
									if(seconds==60){
										seconds=0;
										minutes++;
									}
									//补0
									let a,b;
									if(seconds<10){
										a = "0"+seconds
									}else{
										a = seconds;
									}
									if(minutes<10){
										b = "0"+minutes
									}else{
										b = minutes;
									}
									this.waitingTime = b + ":" + a;
								},1000);
								
								// client.send("app/",{},JSON.stringify(json));
			},
			stopGame() {
				this.match = false;
				this.waitingTime="00:00";
				clearInterval(this.myInterval);
				audioManager.destroyAll();
			},
		}
	}
</script>

<style>
	.tip {
		width: 100%;
		height: 100vh;
		text-align: center;
		line-height: 100vh;
		font-size: 20px;
	}

	.bg-video {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 1;
		left: 0px;
		top: 0px;
	}

	.content {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 2;
		left: 0px;
		top: 0px;
	}

	.header-img {
		width: 60px;
		height: 60px;
		position: absolute;
		left: 5px;
		top: 5px;
		border: 1px solid #ccc;
	}

	.my-head {
		width: 60px;
		height: 60px;
	}

	.lv {
		height: 20px;
		width: 90%;
		text-align: right;
		position: absolute;
		bottom: 0px;
		color: #fff;
		font-size: 12px;
		text-shadow: 1px 1px 0 black;
	}

	.start-game {
		width: 160px;
		height: 60px;
		position: absolute;
		right: 15px;
		bottom: 15px;
		border: 1px solid #ccc;
		background-color: #790002;
		color: #eb9a9b;
		text-align: center;
		line-height: 60px;
		font-size: 20px;
		font-weight: bold;
	}

	.match {
		width: 260px;
		height: 20px;
		position: absolute;
		background-color: rgba(235, 154, 155, 0.6);
		top: 15px;
		left: calc((100% - 260px) / 2);
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		border-radius: 5px;
	}

	.money {
	width: 240px;
	height: 30px;
	position: absolute;
	right: 15px;
	top: 5px;
	color: #fff;
	}

	.tools {
		position: absolute;
		left: 15px;
		bottom: 8px;
	}
	.message-content {
		position: absolute;
		left: 15px;
		top: 75px; 
		color: #fff;
		}

	.advertisement {
		width: 240px;
		height: 120px;
		position: absolute;
		right: 15px;
		top: 50px;
		color: #fff;
		border-radius: 5px;
	}
	.banner{
		width: 100%;
		height: 100%;
	}
	.nickName{
		width: 120px;
		height: 40px;
		position: absolute;
		left: 80px;
		top: 10px;
		/* border: 1px solid black; */
		font-weight: bold;
		color: #ccc;
		font-size: 22px;
	}
	.vip_img{
		width: 30px;
		height: 30px;
		position: relative;
		top: 8px;
	}
</style>